<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <style>
        .container {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #4FC2E5;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container" v-text="msg"  @mouseenter="stop()" @mouseleave="start()"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: '你见或者不见我,我就在那里,不悲不喜;你念或者不念我,情就在那里,不来不去',
                interval: null // 在data上定义定时器对象
            },
            //Vue的钩子函数，页面一加载就执行，只执行一次。此时可以获取date和methods中的对象，但Dom结构还没有初始化完成，也就是说无法进行Dom操作。
            created() {
                this.start();
            },
            methods: {
                start() { //开始定时器
                    if (this.interval != null) return;
                    this.interval = setInterval(() => {
                        //获取到头的第一个字符
                        var start = this.msg.substring(0, 1); 
                        //获取到第一个字符后面的所有字符
                        var end = this.msg.substring(1); 
                        this.msg = end + start; //重新拼接得到新的字符串，即把第一个字符截取出来，放到最后一个位置，并赋值给this.msg
                    }, 300)
                },
                stop() { // 停止定时器
                    clearInterval(this.interval)
                    // 每当清除了定时器之后，需要重新把 interval 置为 null
                    this.interval = null;
                }
            },
        })
    </script>
</body>

</html>